<template>
    <div>
        <a-scrollable>
            <div class="container-v">
                <div class="content"></div>
            </div>
        </a-scrollable>
        <a-scrollable-h>
            <div class="container-h">
                <div class="content"></div>
            </div>
        </a-scrollable-h>
        <a-scrollable>
            <a-scrollable-h>
                <div class="container-vh">
                    <div class="content"></div>
                </div>
            </a-scrollable-h>
        </a-scrollable>
        <pre class="language-html"><code>{{ `<a-scrollable>
    <div class="container-v">
        <div class="content"></div>
    </div>
</a-scrollable>
<a-scrollable-h>
    <div class="container-h">
        <div class="content"></div>
    </div>
</a-scrollable-h>
<a-scrollable>
    <a-scrollable-h>
        <div class="container-vh">
            <div class="content"></div>
        </div>
    </a-scrollable-h>
</a-scrollable>` }}</code></pre>
        <pre class="language-scss"><code>{{ `.container-v {
    width: 200px;
    height: 200px;

    .content {
        height: 400px;
        background: content-box radial-gradient(crimson, skyblue);
    }
}
.container-h {
    margin-top: 20px;
    width: 200px;
    height: 200px;

    .content {
        width: 400px;
        height: 200px;
        background: content-box radial-gradient(crimson, skyblue);
    }
}
.container-vh {
    margin-top: 20px;
    width: 200px;
    height: 200px;

    .content {
        width: 400px;
        height: 400px;
        background: content-box radial-gradient(crimson, skyblue);
    }
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container-v {
    width: 200px;
    height: 200px;

    .content {
        height: 400px;
        background: content-box radial-gradient(crimson, skyblue);
    }
}
.container-h {
    margin-top: 20px;
    width: 200px;
    height: 200px;

    .content {
        width: 400px;
        height: 200px;
        background: content-box radial-gradient(crimson, skyblue);
    }
}
.container-vh {
    margin-top: 20px;
    width: 200px;
    height: 200px;

    .content {
        width: 400px;
        height: 400px;
        background: content-box radial-gradient(crimson, skyblue);
    }
}
</style>

<script>
export default {
    data() {
        return {
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'scrollbarWidth', remark: '滚动条宽度', type: 'number', default: '8' },
                        { name: 'scrollbarDraggable', remark: '是否允许拖拽滚动条', type: 'boolean', default: 'true' },
                        { name: 'scrollbarOpacity', remark: '滚动条不透明度', type: 'number', default: '0.5' },
                        { name: 'scrollbarColor', remark: '滚动条颜色', type: 'string', default: '#666' },
                    ],
                }
            ]
        }
    },
}
</script>